<template>
  <view class="tool-detail-container">
    <!-- 顶部导航和名称 -->
    <view class="header-bar">
      <text class="iconfont icon-back" @tap="goBack"></text>
      <text class="tool-title">{{ tool.name || '工具详情' }}</text>
      <view class="header-right">
        <text class="iconfont icon-share" @tap="shareTool"></text>
        <text class="iconfont icon-favorite" @tap="toggleFavorite"></text>
      </view>
    </view>

    <scroll-view scroll-y class="detail-scroll-content">
      <!-- 工具名称和分类标签 -->
      <view class="section tool-info-section">
        <view class="tool-name-category">
          <text class="main-tool-name">{{ tool.name }}</text>
          <text class="category-tag">{{ tool.category }}</text>
        </view>
      </view>

      <!-- 图片展示 (3D模型占位) -->
      <view class="section image-display-section">
        <image
          :src="getToolImage(tool.name)" 
          mode="aspectFit"
          class="tool-display-image"
        ></image>
        <!-- 3D模型功能复杂，此处仅为占位图 -->
      </view>

      <!-- 医学用途说明 -->
      <view class="section">
        <view class="section-header">
          <text class="iconfont icon-medical-use"></text>
          <text class="section-title">医学用途说明</text>
        </view>
        <text class="content-text">{{ tool.medicalUse }}</text>
      </view>

      <!-- 规范使用步骤 -->
      <view class="section">
        <view class="section-header">
          <text class="iconfont icon-steps"></text>
          <text class="section-title">规范使用步骤</text>
        </view>
        <view class="step-list">
          <view v-for="(step, index) in tool.usageSteps" :key="index" class="step-item">
            <view class="step-icon">
              <text class="iconfont icon-step-number">{{ index + 1 }}</text>
            </view>
            <text class="step-text">{{ step }}</text>
          </view>
        </view>
      </view>

      <!-- 注意事项 -->
      <view class="section">
        <view class="section-header">
          <text class="iconfont icon-precautions"></text>
          <text class="section-title">注意事项</text>
        </view>
        <view class="precautions-list">
          <view v-for="(item, index) in tool.precautions" :key="index" class="precaution-item">
            <text class="iconfont icon-warning warning-icon"></text> <!-- 警告图标 -->
            <text class="precaution-text">{{ item }}</text>
          </view>
        </view>
        <view class="safety-tip">
          <text class="iconfont icon-info-circle info-icon"></text> <!-- 信息图标 -->
          <text>请在专业指导下使用医疗工具，遵循医疗建议。</text>
        </view>
      </view>

      <!-- 适用场景 -->
      <view class="section">
        <view class="section-header">
          <text class="iconfont icon-scenario"></text>
          <text class="section-title">适用场景</text>
        </view>
        <view class="scenario-tags">
          <text v-for="(scenario, index) in tool.applicationScenarios" :key="index" class="scenario-tag">
            {{ scenario }}
          </text>
        </view>
      </view>

      <!-- 消毒保养方法 -->
      <view class="section">
        <view class="section-header">
          <text class="iconfont icon-maintenance"></text>
          <text class="section-title">消毒保养方法</text>
        </view>
        <view class="maintenance-list">
          <text v-for="(method, index) in tool.maintenance" :key="index" class="content-text">
            - {{ method }}
          </text>
        </view>
      </view>

      <!-- 智能场景匹配和急救指引（占位） -->
      <view v-if="tool.category === '急救工具'" class="section emergency-guidance">
        <view class="section-header">
          <text class="iconfont icon-emergency"></text>
          <text class="section-title">紧急操作快速指引</text>
        </view>
        <text class="content-text">（此处将提供急救工具的紧急操作快速指引）</text>
        <!-- 具体内容待补充 -->
      </view>
    </scroll-view>

    <!-- 底部操作按钮 (收藏/分享) -->
    <!-- 这部分已移到顶部导航，如果仍需底部固定按钮，可在此添加 -->

  </view>
</template>

<script>
export default {
  data() {
    return {
      tool: {}, // 存储接收到的工具数据
    };
  },
  onLoad() {
    // 监听 medical.vue 页面通过 eventChannel 传递的数据
    const eventChannel = this.getOpenerEventChannel();
    if (eventChannel) {
      eventChannel.on('toolDetailData', (data) => {
        this.tool = data; // 将数据赋值给 tool
        console.log('Tool detail data received:', this.tool);
      });
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    getToolImage(toolName) {
      const imageMap = {
        '听诊器': '/static/img/tools/听诊器.png',
        '电子血压计': '/static/img/tools/电子血压计.png',
        '额温枪': '/static/img/tools/额温枪.png',
        '手术刀': '/static/img/tools/手术刀.png',
        '止血钳': '/static/img/tools/止血钳.png',
        '胰岛素笔': '/static/img/tools/胰岛素笔.png',
        '雾化器': '/static/img/tools/雾化器.png',
        'AED除颤仪': '/static/img/tools/AED除颤仪.png',
        '急救呼吸面罩': '/static/img/tools/急救呼吸面罩.png',
        '止血带': '/static/img/tools/止血带.png',
        '预充式注射器': '/static/img/tools/预充式注射器.png',
        '助行器': '/static/img/tools/助行器.png',
        '颈托': '/static/img/tools/颈托.png',
        '指夹式血氧仪': '/static/img/tools/指夹式血氧仪.png',
        '血糖仪': '/static/img/tools/血糖仪.png',
      };
      return imageMap[toolName] || '/static/img/tools/default_tool.gif';
    },
    shareTool() {
      uni.showToast({ title: '分享功能待开发', icon: 'none' });
      // 实现分享逻辑
    },
    toggleFavorite() {
      uni.showToast({ title: '收藏功能待开发', icon: 'none' });
      // 实现收藏逻辑
    },
  },
};
</script>

<style scoped>
/* 整体容器 */
.tool-detail-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 40rpx; /* 底部留白 */
}

/* 头部导航条 */
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #4B7BFF; /* 主色调 */
  color: #fff;
  font-size: 32rpx;
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-bar .iconfont {
  font-size: 40rpx;
  color: #fff;
}

.tool-title {
  flex: 1;
  text-align: center;
  font-weight: bold;
  margin: 0 20rpx;
}

.header-right {
  display: flex;
  gap: 30rpx;
}

/* 滚动内容区 */
.detail-scroll-content {
  height: calc(100vh - var(--status-bar-height, 0) - 80rpx); /* 减去顶部导航高度 */
  box-sizing: border-box;
}

.section {
  background-color: #fff;
  border-radius: 20rpx;
  margin: 20rpx 30rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 15rpx rgba(0,0,0,0.05);
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 25rpx;
}

.section-header .iconfont {
  font-size: 36rpx;
  color: #4B7BFF; /* 图标颜色 */
  margin-right: 15rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.content-text {
  font-size: 28rpx;
  color: #555;
  line-height: 1.6;
  margin-bottom: 10rpx;
  display: block; /* 确保多行内容换行 */
}

/* 工具信息部分 */
.tool-info-section {
  padding-top: 50rpx; /* 留出顶部导航的高度 */
}

.tool-name-category {
  display: flex;
  align-items: baseline;
  margin-bottom: 20rpx;
}

.main-tool-name {
  font-size: 44rpx;
  font-weight: bold;
  color: #333;
  margin-right: 20rpx;
}

.category-tag {
  background-color: #E6F0FF; /* 浅蓝色背景 */
  color: #4B7BFF; /* 蓝色文字 */
  font-size: 24rpx;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
}

/* 图片展示 */
.image-display-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400rpx; /* 增加高度 */
  background-color: #f0f8ff; /* 更浅的背景色 */
}

.tool-display-image {
  width: 100%;
  max-height: 350rpx; /* 控制图片最大高度 */
  object-fit: contain;
  margin-bottom: 15rpx;
}

.image-placeholder-text {
  font-size: 24rpx;
  color: #999;
  text-align: center;
}

/* 步骤列表 */
.step-list {
  margin-top: 15rpx;
}

.step-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20rpx;
}

.step-icon {
  width: 40rpx;
  height: 40rpx;
  background-color: #4B7BFF;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 24rpx;
  margin-right: 15rpx;
  flex-shrink: 0;
}

.step-text {
  flex: 1;
  font-size: 28rpx;
  color: #555;
  line-height: 1.5;
}

/* 注意事项 */
.precautions-list {
  margin-top: 15rpx;
}

.precaution-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15rpx;
}

.warning-icon {
  font-size: 32rpx;
  color: #FF8C00; /* 橙色警告 */
  margin-right: 15rpx;
  flex-shrink: 0;
}

.precaution-text {
  flex: 1;
  font-size: 28rpx;
  color: #555;
  line-height: 1.5;
}

.safety-tip {
  display: flex;
  align-items: flex-start;
  background-color: #FFF3E0; /* 浅橙色背景 */
  border-left: 8rpx solid #FF8C00; /* 橙色边框 */
  padding: 20rpx;
  border-radius: 8rpx;
  margin-top: 25rpx;
}

.info-icon {
  font-size: 32rpx;
  color: #FF8C00;
  margin-right: 15rpx;
  flex-shrink: 0;
}

/* 适用场景 */
.scenario-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
  margin-top: 15rpx;
}

.scenario-tag {
  background-color: #E0F7FA; /* 浅青色背景 */
  color: #00BCD4; /* 青色文字 */
  font-size: 26rpx;
  padding: 10rpx 20rpx;
  border-radius: 30rpx;
}

/* 消毒保养方法 */
.maintenance-list {
  margin-top: 15rpx;
}

/* 急救指引 */
.emergency-guidance {
  background-color: #FFF1F0; /* 浅红色背景 */
  border-left: 8rpx solid #F44336; /* 红色边框 */
}

.emergency-guidance .section-header .iconfont {
  color: #F44336;
}

/* iconfont 类名 */
/* icon-back, icon-share, icon-favorite, icon-medical-use, icon-steps, icon-precautions, icon-warning, icon-info-circle, icon-scenario, icon-maintenance, icon-emergency, icon-step-number */
</style>
